<template>
  <div class="live-page" :style="'padding-top:'+headHeight+'rpx;'">
 
    <head-back title="返回" @goBack="goBack"></head-back>
    <!--直播课程-->
    <div class="live-class-box">
        <p class="title">{{title}}</p>
        <div class="play-box">
          <video class="img" autoplay="true" :src="play_url"/>
        </div>
    </div>
  </div>
</template>
<script>
  const app = getApp();
  import headBack from '@/components/head-back.vue' ;
  import * as api from '@/utils/api' ;
  export default {
    onLoad(option){
      this._data.play_url = option.play_url;
      this._data.title = option.title;
    },
    onShow: function () {

    },

    data () {
        return {
            headPadding:wx.getStorageSync('headPadding'), 
            headHeight:wx.getStorageSync('headHeight'), 
            title:'',
            play_url:''
        }
    },

    components:{
        headBack 
    },
    methods: {
        goBack(){ 
            setTimeout(()=>{
                wx.navigateBack({ delta: 1 });
            },300);
        }, 
    },
  }
</script>

<style lang="scss" scoped>
  .live-page{
    width:100%;
    height:100%;
    color:#666666;
    background: #F1F2F7;
    font-size: 28rpx;
    box-sizing: border-box;

    .title{
      padding: 22rpx 0;
      display:flex;
      align-items:center;
      font-size: 34rpx;
      font-weight: 600;
      color: #0E0E0E;
    }

    //直播课程
    .live-class-box{
        margin-bottom: 20rpx;
        background:#ffffff;
        padding: 32rpx 33rpx;

        .play-box{
          position: relative;
          .img{
            width: 684rpx;
            height: 385rpx;
            border-radius: 10rpx;
          }
          .play-btn{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -105rpx;
            margin-top: -114rpx;
            width: 210rpx;
            height: 228rpx;
          }
        }
    }

    //老师简介
    .teacher-info{background: #ffffff;padding: 0 33rpx 32rpx 33rpx;}

    //进入直播间
    .btn{
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      font-size: 30rpx;
      color: #ffffff;
      background: linear-gradient(0deg,rgba(77,141,249,1),rgba(86,117,254,1));
      box-shadow: 0 2rpx 7rpx 0 rgba(82,127,252,0.48);
    }
  }

</style>
